<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>FPS Panel — Space.js</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
    <link rel="stylesheet" href="assets/css/style.css">

    <script type="module">
        import { PanelItem, UI, brightness } from '../src/index.js';

        const ui = new UI({ fps: true });
        ui.animateIn();
        document.body.appendChild(ui.element);

        const items = [
            {
                label: 'FPS'
            },
            {
                type: 'divider'
            },
            {
                type: 'color',
                value: getComputedStyle(document.querySelector(':root')).getPropertyValue('--bg-color').trim(),
                callback: value => {
                    document.body.style.backgroundColor = `#${value.getHexString()}`;

                    ui.invert(brightness(value) > 0.6); // Light colour is inverted
                }
            }
        ];

        items.forEach(data => {
            ui.addPanel(new PanelItem(data));
        });

        function animate() {
            requestAnimationFrame(animate);

            ui.update();
        }

        requestAnimationFrame(animate);
    </script>
</head>
<body>
</body>
</html>
